<template>
	<view class="container">
		<!-- 功能按钮区 -->
	<!-- 	<view class="function-buttons">
			<view class="button-item" @click="goToTransfer">
				<image class="headiconone" src="/static/renwu/tioajieban.png"></image>
				<text class="button-text">台尼调货中心</text>
			</view>
			<view class="button-item" @click="goToMasterEntry">
				<image class="headicontwo" src="/static/renwu/shifuguanli.png"></image>
				<text class="button-text">师傅入驻管理</text>
			</view>
		</view> -->

		<!-- 订单状态切换栏 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab === 'qiangdan' }" @click="changeTab('qiangdan')">
				<image v-if="activeTab === 'qiangdan'" class="tab-icon" src="/static/renwu/taiqiu.png"></image>
				<text class="tab-text" :class="{'orange-text':activeTab==='qiangdan'}">候单待抢</text>
				<view v-if="activeTab === 'qiangdan'" class="active-line" style="background-color: #ffaa00;"></view>
			</view>

			<view class="tab-item" :class="{ active: activeTab === 'serve' }" @click="changeTab('serve')">
				<text class="tab-text" :class="{'orange-text':activeTab==='serve'}">待启服务</text>
				<view v-if="activeTab === 'serve'" class="active-line"></view>
			</view>

			<view class="tab-item" :class="{ active: activeTab === 'completed' }" @click="changeTab('completed')">
				<text class="tab-text">订单完成</text>
				<view v-if="activeTab === 'completed'" class="active-line"></view>
			</view>

			<view class="tab-item" :class="{ active: activeTab === 'canceled' }" @click="changeTab('canceled')">
				<text class="tab-text">订单取消</text>
				<view v-if="activeTab === 'canceled'" class="active-line"></view>
			</view>
		</view>

		<!-- 订单列表展示区 -->
		<view class="order-list">
			

			<!-- 请求失败提示 -->
			<view v-if="requestFailed" class="error-container">
				<image class="error-icon" src="/static/common/error.png"></image>
				<text class="error-text">网络请求失败，请检查网络后重试</text>
				<button @click="retryRequest" class="retry-button">重新加载</button>
			</view>

			<!-- 订单列表 -->
			<view v-if=" !requestFailed">
				<view v-if="orderList.length === 0" class="empty-container">
					<text>暂无订单数据</text>
				</view>

				<view v-else>
					<view v-for="(order, index) in orderList" :key="order.id" class="order-item">
						<!-- 订单头部信息 -->
						<view class="order-header">
							<text class="order-title">{{order.title}}</text>
							<text
								class="order-status">{{order.status === 'pending' ? '候单待抢' : order.status === 'accepted' ? '待启服务' : order.status === 'done' ? '订单完成' : '订单取消'}}</text>
						</view>

						<!-- 订单基本信息 -->
						<view class="order-info">
							<text class="info-label">订单描述：</text>
							<text class="info-value">更换{{order.brand_and_bottom || '台球桌配件'}}</text>
						</view>

						<view class="order-info">
							<text class="info-label">用户报价：</text>
							<text class="info-value">¥{{order.user_price || '待报价'}}</text>
						</view>

						<!-- 地址信息 -->
						<view class="address-section">
							<text class="section-title">服务地址</text>
							<view class="address-detail">
								<text>{{order.address.address}}</text>
								<text>{{order.address.details}}</text>
								<text>联系人：{{order.address.contact_name}}</text>
								<text>电话：{{order.address.contact_phone}}</text>
							</view>
						</view>

						<!-- 时间信息 -->
						<view class="time-info">
							<text>创建时间：{{order.created_at}}</text>
							<text>更新时间：{{order.updated_at}}</text>
						</view>

						<!-- 操作按钮区域 -->
						<view class="action-buttons">
							<!-- 候单待抢 抢单按钮 -->
							<button v-if="order.status === 'pending'" @click="acceptOrder(order.id)"
								class="accept-button">抢单</button>

							<!-- 待启服务 完成和取消按钮 -->
							<view v-if="order.status === 'accepted'" class="serve-buttons">
								<button @click="completeOrder(order.id)" class="complete-button">完成</button>
								<button @click="cancelOrder(order.id)" class="cancel-button">取消</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'qiangdan',
		data() {
			return {
				activeTab: 'qiangdan',
				orderList: [],
				isLoading: false,
				requestFailed: false,
				queryParams: {
					status: 'pending',
					//  'accepted', 'completed','canceled'
					// user_id: '1',
					// worker_id: '5',
					// per_page: 15,
					// current_page: 1
				}


				// API基础配置
				//  apiConfig: {
				// baseURL: 'http://8.137.61.186:8000',
				// timeout: 10000,//10秒
				// headers: {
				// 'Content-Type': 'application/json'//跨域
				// }
				//  }
			}
		},
		methods: {
			// 切换标签页
			changeTab(tab) {
				this.activeTab = tab;
				let status = '';
				switch (tab) {
					case 'qiangdan':
						status = 'pending';
						break;
					case 'serve':
						status = 'accepted';
						break;
					case 'completed':
						status = 'done';
						break;
					case 'canceled':
						status = 'canceled';
						break;
				}
				this.queryParams.status = status;
				this.getOrders();
			},


			goToTransfer() {
				uni.navigateTo({
					url: '/pages/mask/tiaohuo/index'
				});
			},

			goToMasterEntry() {
				uni.navigateTo({
					url: '/pages/my/master/index'
				});
			},

			// 重试请求方法
			retryRequest() {
				this.requestFailed = false;
				this.getOrders();
			},

			// 获取订单数据
			getOrders() {
				this.isLoading = true;
				this.requestFailed = false;

				uni.showLoading({
					title: '加载中...',
					mask: true
				});

				this.token = uni.getStorageSync('token');
				this.$http.get("https://billiards.cqtrust.cn/orders", {
						status: this.queryParams.status

					})
					.then((res) => {
						this.orderList = res.data.map(item => ({
							id: item.id,
							title: item.title,
							status: item.status,
							description: item.mover_service || item.title,
							expected_time: item.expected_time,
							user_price: '0',
							remark: item.remark || '无',
							address: {
								address: item.address_details?.address || '',
								details: item.address_details?.details || '',
								contact_name: item.address_details?.contact_name || '',
								contact_phone: item.address_details?.contact_phone || ''
							},
							created_at: item.user_details?.created_at || '未知时间',
							updated_at: item.updated_at || '未知时间'
						}));

						uni.hideLoading();
						this.isLoading = false;
					})
					.catch((res) => {
						console.log(res);
						return Promise.reject(false);
					});
			},
			// 抢单/接受订单
			acceptOrder(orderId) {
				uni.showLoading({
					title: '处理中...'
				});

				this.$http.put(`https://billiards.cqtrust.cn/orders/${orderId}`, {
						status: 'accepted'
					})
					.then(() => {
						uni.showToast({
							title: '抢单成功',
							icon: 'success'
						});
						this.getOrders(); // 刷新订单列表
					})
					.catch(err => {
						console.error('抢单失败:', err);
						uni.showToast({
							title: '抢单失败',
							icon: 'none'
						});
					})
					.finally(() => {
						uni.hideLoading();
					});
			},

			// 完成订单
			completeOrder(orderId) {
				uni.showLoading({
					title: '处理中...'
				});

				this.$http.put(`https://billiards.cqtrust.cn/orders/${orderId}`, {
						status: 'done'
					})
					.then(() => {
						uni.showToast({
							title: '订单已完成',
							icon: 'success'
						});
						this.getOrders(); // 刷新订单列表
					})
					.catch(err => {
						console.error('完成订单失败:', err);
						uni.showToast({
							title: '完成订单失败',
							icon: 'none'
						});
					})
					.finally(() => {
						uni.hideLoading();
					});
			},

			// 取消订单
			cancelOrder(orderId) {
				uni.showLoading({
					title: '处理中...'
				});

				this.$http.delete(`https://billiards.cqtrust.cn/orders/${orderId}`)
					.then(() => {
						uni.showToast({
							title: '订单已取消',
							icon: 'success'
						});
						this.getOrders(); // 刷新订单列表
					})
					.catch(err => {
						console.error('取消订单失败:', err);
						uni.showToast({
							title: '取消订单失败',
							icon: 'none'
						});
					})
					.finally(() => {
						uni.hideLoading();
					});
			},


			// 处理请求错误
			handleRequestError(message) {
				uni.hideLoading();
				this.isLoading = false;
				this.requestFailed = true;

				console.error('请求失败:', message);
				uni.showToast({
					title: '请求失败: ' + message,
					icon: 'none',
					duration: 3000
				});
			},

			// 获取错误信息
			getErrorMessage(err) {
				const errorMap = {
					'request:fail abort': '请求被取消',
					'request:fail timeout': '请求超时',
					'request:fail': '网络连接失败'
				};
				return errorMap[err.errMsg] || '未知错误';
			}
		},
		// mounted() {
		// 	this.getOrders();
		// },
		onShow() {
			this.getOrders();
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #fff;
	}

	// 功能按钮区
	.function-buttons {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.button-item {
		display: flex;
		align-items: center;
	}

	.headiconone,
	.headicontwo {
		width: 60rpx;
		height: 55rpx;
		margin-right: 10rpx;
	}

	.button-text {
		font-size: 28rpx;
	}

	// 订单状态切换栏
	.tab-bar {
		display: flex;
		border-bottom: 2rpx solid #e0e0e0;
		margin-bottom: 20rpx;
	}

	.tab-item {
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		position: relative;
	}

	.tab-text {
		transition: color 0.3s;
	}

	.orange-text {
		color: #ffaa00 !important;
	}

	.active {
		color: #ffaa00;
	}

	.action-buttons {
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-end;

		button {
			margin-left: 20rpx;
			font-size: 28rpx;
			border-radius: 40rpx;
			padding: 0 30rpx;
			height: 60rpx;
			line-height: 60rpx;
		}

		.accept-button {
			background-color: #ffaa00;
			color: white;
		}

		.serve-buttons {
			display: flex;

			.complete-button {
				background-color: #07c160;
				color: white;
			}

			.cancel-button {
				background-color: #ff4d4f;
				color: white;
			}
		}
	}

	.active-line {
		width: 75%;
		height: 3rpx;
		background-color: #ffaa00;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	/* 为第一个tab的active-line设置橙色 */
	.tab-item:nth-child(1) .active-line {
		background-color: #ffaa00 !important;
	}

	.tab-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}



	/* 错误提示容器 */
	.error-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 40rpx;
		background-color: #f8f8f8;
		border-radius: 16rpx;
		margin: 40rpx 20rpx;
		text-align: center;
	}

	/* 错误图标 */
	.error-icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 30rpx;
	}

	/* 错误提示文字 */
	.error-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 40rpx;
		line-height: 1.6;
	}

	/* 重试按钮 - 美化版 */
	.retry-button {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(90deg, #ffaa00, #ff8800);
		color: #fff;
		font-size: 30rpx;
		border-radius: 40rpx;
		border: none;
		box-shadow: 0 4rpx 12rpx rgba(255, 170, 0, 0.3);
		transition: all 0.3s;
	}

	.retry-button:active {
		opacity: 0.9;
		transform: scale(0.98);
	}

	/* 空状态提示 */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 0;
	}

	.empty-icon {
		width: 180rpx;
		height: 180rpx;
		opacity: 0.5;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}


	//内容
	.order-item {
		padding: 20rpx;
		margin-bottom: 30rpx;
		border-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 15rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.order-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.order-status {
		padding: 6rpx 15rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		background-color: #ffaa00;
		color: #fff;
	}

	.order-info {
		display: flex;
		margin-bottom: 12rpx;
		font-size: 28rpx;
	}

	.info-label {
		color: #666;
		min-width: 120rpx;
	}

	.info-value {
		color: #333;
		flex: 1;
	}

	.address-section {
		margin-top: 20rpx;
		padding-top: 15rpx;
		border-top: 1rpx dashed #eee;
	}

	.section-title {
		display: block;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.address-detail {
		padding: 15rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
	}

	.address-detail text {
		display: block;
		margin-bottom: 8rpx;
		font-size: 26rpx;
		color: #555;
	}

	.time-info {
		margin-top: 15rpx;
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #999;
		text-align: right;
	}

	.time-info text {
		display: block;
	}
</style>